<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端完整视口代码处理 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no" />
    <!-- Html视口(viewport)： -->
    <!-- width=device-width：页面宽度等于设备宽度 -->
    <!-- initial-scale=1：   初始缩放级别 -->
    <!-- minimum-scale=1：   最小的缩放级别 -->
    <!-- maximum-scale=1：   最大的缩放级别 -->
    <!-- user-scalable=no:   禁止用户手动缩放 -->
    <title>游乐园</title>
    <!-- 网站图标 -->
    <link rel="icon" href="./favicon.ico">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 引入自己的index.css -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 采用先用px书写,最后一次性利用快捷键转换为rem -->

    <!-- 头部导航部分 手机状态栏 -->
    <header>
        <img src="./images/wx.png" alt="手机状态栏">
    </header>
    <!-- 因为上方脱标了,所以需要填充空间去弥补 -->
    <!-- 1.新增一个主体内容大容器,添加上内边距 -->
    <!-- 2.新增一个空的盒子,高度和header一样 -->

    <!-- 代替上面header占据位置 -->
    <div class="header_kong"></div>

    <!-- banner 轮播图部分 -->
    <div class="banner">
        <img src="./uploads/banner_1.png" alt="">
    </div>

    <!-- 活动模块 activity_Module -->

    <div class="activity_Module">
        <!-- 活动标题 -->
        <!-- 不要使用h1,通常一个页面只能存在一个h1 -->
        <h3>乐园活动</h3>

        <!-- 活动模板 activity_Template-->
        <ul class="activity_Template">
            <!-- 进行中 -->
            <li>
                <!-- 活动图片 -->
                <div class="activity_pic">
                    <!-- img通常用div包裹 -->
                    <!-- 如果有一天,img因为某种原因导致无法正常加载 -->
                    <!-- 它的父级容器依旧为它占据着空间 -->
                    <!-- 确保整体布局不会过分受到影响 -->
                    <!-- 从上到下 -->
                    <!-- 由外到内 -->
                    <!-- 盒子的高度要尤其注意 -->
                    <!-- 写完了以后要右键检查高度是否合适 -->
                    <img src="./uploads/item_1.png" alt="图片加载失败">
                </div>

                <!-- 活动信息 -->
                <div class="activity_info">
                    <!-- 上部分 -->
                    <div class="activity_info_HD">
                        <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                        <em>免费</em>
                    </div>

                    <!-- 下部分 -->
                    <div class="activity_info_BD">
                        <em>200人已报名</em>
                        <span>本周六开始</span>
                    </div>

                </div>
            </li>
            <!-- 已截止 -->
            <li class="yjz wsc">
                <!-- 活动图片 -->
                <div class="activity_pic">
                    <!-- img通常用div包裹 -->
                    <!-- 如果有一天,img因为某种原因导致无法正常加载 -->
                    <!-- 它的父级容器依旧为它占据着空间 -->
                    <!-- 确保整体布局不会过分受到影响 -->
                    <!-- 从上到下 -->
                    <!-- 由外到内 -->
                    <!-- 盒子的高度要尤其注意 -->
                    <!-- 写完了以后要右键检查高度是否合适 -->
                    <img src="./uploads/item_2.png" alt="图片加载失败">
                </div>

                <!-- 活动信息 -->
                <div class="activity_info">
                    <!-- 上部分 -->
                    <div class="activity_info_HD">
                        <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                        <em>免费</em>
                    </div>

                    <!-- 下部分 -->
                    <div class="activity_info_BD">
                        <em>200人已报名</em>
                        <span>本周六开始</span>
                    </div>

                </div>
            </li>
            <!-- 已结束 -->
            <li class="yjs">
                <!-- 活动图片 -->
                <div class="activity_pic">
                    <!-- img通常用div包裹 -->
                    <!-- 如果有一天,img因为某种原因导致无法正常加载 -->
                    <!-- 它的父级容器依旧为它占据着空间 -->
                    <!-- 确保整体布局不会过分受到影响 -->
                    <!-- 从上到下 -->
                    <!-- 由外到内 -->
                    <!-- 盒子的高度要尤其注意 -->
                    <!-- 写完了以后要右键检查高度是否合适 -->
                    <img src="./uploads/item_3.png" alt="图片加载失败">
                </div>

                <!-- 活动信息 -->
                <div class="activity_info">
                    <!-- 上部分 -->
                    <div class="activity_info_HD">
                        <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                        <em>免费</em>
                    </div>

                    <!-- 下部分 -->
                    <div class="activity_info_BD">
                        <em>200人已报名</em>
                        <span>本周六开始</span>
                    </div>

                </div>

                <!-- 添加遮罩层 -->
                <div class="mask"></div>
            </li>

            <li class="wsc">
                <!-- 活动图片 -->
                <div class="activity_pic">
                    <!-- img通常用div包裹 -->
                    <!-- 如果有一天,img因为某种原因导致无法正常加载 -->
                    <!-- 它的父级容器依旧为它占据着空间 -->
                    <!-- 确保整体布局不会过分受到影响 -->
                    <!-- 从上到下 -->
                    <!-- 由外到内 -->
                    <!-- 盒子的高度要尤其注意 -->
                    <!-- 写完了以后要右键检查高度是否合适 -->
                    <img src="./uploads/item_3.png" alt="图片加载失败">
                </div>

                <!-- 活动信息 -->
                <div class="activity_info">
                    <!-- 上部分 -->
                    <div class="activity_info_HD">
                        <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                        <em>免费</em>
                    </div>

                    <!-- 下部分 -->
                    <div class="activity_info_BD">
                        <em>200人已报名</em>
                        <span>本周六开始</span>
                    </div>

                </div>
            </li>

            <li class="yjs">
                <!-- 活动图片 -->
                <div class="activity_pic">
                    <!-- img通常用div包裹 -->
                    <!-- 如果有一天,img因为某种原因导致无法正常加载 -->
                    <!-- 它的父级容器依旧为它占据着空间 -->
                    <!-- 确保整体布局不会过分受到影响 -->
                    <!-- 从上到下 -->
                    <!-- 由外到内 -->
                    <!-- 盒子的高度要尤其注意 -->
                    <!-- 写完了以后要右键检查高度是否合适 -->
                    <img src="./uploads/item_3.png" alt="图片加载失败">
                </div>

                <!-- 活动信息 -->
                <div class="activity_info">
                    <!-- 上部分 -->
                    <div class="activity_info_HD">
                        <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p>
                        <em>免费</em>
                    </div>

                    <!-- 下部分 -->
                    <div class="activity_info_BD">
                        <em>200人已报名</em>
                        <span>本周六开始</span>
                    </div>

                </div>

                <!-- 添加遮罩层 -->
                <div class="mask"></div>
            </li>
        </ul>
    </div>

    <!-- 代替下面footer占据位置 -->
    <div class="footer_kong"></div>

    <footer>
        <ul>
            <li class="activate">
                <em class="iconfont icon-index-copy"></em>
                <p>首页</p>
            </li>
            <li>
                <em class="iconfont icon-youhuiquan
                "></em>
                <p>卡券</p>
            </li>
            <li>
                <em class="iconfont icon-iconfront-"></em>
                <p>我的</p>
            </li>
        </ul>
    </footer>

    <!-- 需要使用到rem布局方案,所以要在body底部引入flexible.js文件 -->
    <!-- 自动获取屏幕宽度,并除以10,添加到html的fz身上(相当于有无数个媒体查询存在) -->
    <script src="./js/flexible.js"></script>
</body>



</html>